import React, {
  useCallback,
  useEffect,
  useInsertionEffect,
  useState,
} from "react";
import { useLayoutEffect } from "react";

const Child = React.memo((props) => {
  console.log("child被执行");

  return (
    <>
      <h1>Child------{props.info.name}-----{props.info.age}</h1>
    
    </>
  );
});

//app重新渲染会是changeName重新创建导致儿子被调用
function App() {
  const [count, setCount] = useState(100);
  const [name, setName] = useState("张三");
  const [age]=useState(18);
  //若父组件传过来的是对象，则对象引用地址不变，不会重新创建对象，但是父组件重新刷新会导致info对象的地址变化，
  // 导致子组件重新渲染
  const info={
    name,
    age
  }

  const changeName = useCallback((val) => {
    setName(val);
  }, []);


  return (
    <div>
      <h1 id="title">APP</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        {count}
      </button>
      <hr></hr>
      <Child info={info} ></Child>

    </div>
  );
}

export default App;
